<template>
    <div>
        <div class="info" :style="{ 'background-image': 'url(' + (playInfo ? playInfo.coverImgUrl : '') + ')' }">
            <div class="describe">
                <div class="cover">
                    <img :src="playInfo && playInfo.coverImgUrl" alt="">
                </div>
                <div class="introduce">
                    <h4>{{ playInfo && playInfo.description }}</h4>
                    <p>
                        <img :src="playInfo && playInfo.creator.avatarUrl" alt="">
                        <span>{{ playInfo && playInfo.creator.nickname }}</span>
                    </p>
                </div>
            </div>
            <button class="back" @click="handleBack">返回</button>
        </div>
        <div class="container">
            <div class="total">
                <span>播放全部(共{{ playInfo && playInfo.trackCount }}首)</span>
                <span class="collection">+收藏({{ playInfo && playInfo.subscribedCount }})</span>
            </div>
            <ul>
                <li v-for="(data, index) in dataList" :key="data.id">
                    <div class="message">
                        <h5>{{ data.name }}</h5>
                        <p>{{ data.ar[0].name }}</p>
                    </div>
                    <div class="play">
                        <i class="iconfont icon-Play" title="播放" @click="handleClick(index)"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    beforeMount() {
        axios({
            url: `https://api.mtnhao.com/playlist/detail?id=${this.id}`,
            method: 'GET',
            withCredentials: false
        }).then(res => {
            this.playInfo = res.data.playlist;
            let ids = '';
            res.data.playlist.trackIds.forEach(item => {
                ids = ids + ',' + item.id
            })
            axios({
                url: `https://api.mtnhao.com/song/detail?ids=${ids.substr(1)}`,
                method: 'GET',
                withCredentials: false
            }).then(res => {
                this.dataList = res.data.songs;

                const songs = [];
                res.data.songs.forEach(item => {
                    const obj = {};
                    axios({
                        url: `https://api.mtnhao.com/song/url?id=${item.id}`,
                        method: 'GET',
                        withCredentials: false
                    }).then(res => {
                        obj.content = res.data.data[0].url;
                    })
                    obj._id = item.id;
                    obj.name = item.name;
                    obj.album = item.al.name;
                    obj.singer = item.ar[0].name;
                    obj.cover = item.al.picUrl;
                    songs.push(obj);
                })
                this.songs = songs;
            })
        })
    },
    data() {
        return {
            playInfo: null,
            dataList: [],
            songs: []
        }
    },
    props: ['id'],
    methods: {
        handleClick(index) {
            this.$store.commit('changeCurrentSongList', this.songs);
            let currentSong = this.songs[index];
            this.$store.commit('togglePlay', true);
            this.$store.commit('initCurrentSongIndex', index);
            this.$store.commit('changeCurrentSong', currentSong);
        },
        handleBack() {
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss" scoped>
    .info {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;
        height: 320px;
        padding: 10px 90px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 30%;
        border-bottom: 1px solid #ccc;

        .describe {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 230px;

            .cover {
                width: 230px;
                height: 230px;
                margin-right: 40px;

                img {
                    width: 100%;
                }
            }

            .introduce {
                flex: 1 1 auto;
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-between;
                align-items: flex-start;
                height: 230px;
                color: #eee;
                font-size: 1.2rem;

                h4 {
                    width: 100%;
                    margin-bottom: 20px;
                }

                p {
                    width: 100%;
                    height: 40px;
                    cursor: pointer;

                    img {
                        height: 100%;
                        margin-right: 5px;
                        border-radius: 50%;
                        vertical-align: middle;
                    }
                }
            }
        }

        .back {
            position: absolute;
            top: 15px;
            left: 77%;
            background-color: transparent;
            border: none;
            color: #eee;
            font-size: 1.2rem;
            cursor: pointer;
        }
    }

    .container {
        width: 1200px;
        min-height: calc(100vh - 360px);
        margin: 0 auto;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;

        .total {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            padding: 0 0 0 10px;
            cursor: default;

            span {
                height: 100%;
                padding: 0 7px;
                font-size: 1.2rem;
                line-height: 50px;
            }

            .collection {
                background-color: #ee4d41;
                background-image: linear-gradient(to right, rgba(226, 125, 125, 0), #e24d4d);
                color: #eee;
            }
        }

        li {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            padding: 0 10px;
            border-top: 1px solid #ccc;
            cursor: default;

            &:nth-child(odd) {
                background-color: rgba($color: #ddd, $alpha: 0.3);
            }

            .message {
                display: flex;
                flex-flow: column nowrap;
                justify-content: space-evenly;
                align-items: center;
                height: 100%;

                h5 {
                    width: 100%;
                    font-size: 1.3rem;
                }

                p {
                    width: 100%;
                    color: #ccc;
                    font-size: 0.9rem;
                }
            }

            .play {
                cursor: pointer;

                i {
                    font-size: 1.8rem;
                }
            }
        }
    }
</style>